<template>
    <div>
      <ul class="list common_bg_fff">
        <li class="list_li" @click="searchOrder(1)" :class="{'active':orderType==1}"><span class="font_333_28">全部</span></li>
        <li class="list_li" @click="searchOrder(2)" :class="{'active':orderType==2}"><span class="font_333_28">待接单</span></li>
        <li class="list_li" @click="searchOrder(3)" :class="{'active':orderType==3}"><span class="font_333_28">待支付</span></li>
        <li class="list_li" @click="searchOrder(4)" :class="{'active':orderType==4}"><span class="font_333_28">待评价</span></li>
        <li class="list_li" @click="searchOrder(5)" :class="{'active':orderType==5}"><span class="font_333_28">已完成</span></li>
      </ul>

      <ul class="orderLIST" v-if="!noLIST">
        <li @click="linkTOdetail(item.id)" class="orderLIST_li common_bg_fff" v-for="(item, index) in list">
          <p class="TYPEname">
            <span class="font_999_28">订单号:{{item.out_trade_no}}</span>
            <!--<span class="font_333_30">{{item.class_type==0?'纸类':'塑料类'}}</span>-->
          </p>
          <div class="info">
            <div class="TYPElogo"><i class="inlineBlockIcon" :class="item.com_type==1?'userLOGO':'companyLOGO'"></i></div>
            <div class="infoBOX">
              <p class="order_name font_333_28">{{item.name}}</p>
              <p class="order_time font_999_26">预约时间：{{getDateDiff(item.yuyue_date.split(':')[0])}} {{item.yuyue_date.split(':')[1]==0?'上午':'下午'}}</p>
              <p class="order_phone font_999_26">联系方式：{{item.tel}}</p>
            </div>
            <i class="inlineBlockIcon statusLOGO" :class="item.status==0?'jiedan':item.status==1?'pay':item.status==2?'pinjia':item.status==3?'wancheng':'cancel'"></i>
          </div>
          <p class="order_adress font_666_26">地址：{{item.address}}</p>
        </li>
      </ul>

      <div class="noOrder" v-if="noLIST">
        <div class=" logo"></div>
        <p class="font_999_26">暂无相关订单哦</p>
      </div>
    </div>
</template>

<script>
  import lu from  '@/assets/public.js'
    export default {
        name: '',
        components: {},
        data() {
            return {
              title:'我的订单',
              noLIST:true,
              list:[],
              orderType:1,
              page:1,
              emm:1
            }
        },
        created () {
//          console.log(this.$route.params)
          this.orderType = this.$route.params.id
          this.setTitle(this.title)
          this.scorll()
        },
        mounted: function () {
          this.axios.post('/home/Order/orderList',{
            token:this.$store.state.token,
            page:this.page,
            type:this.orderType
          }).then((res)=>{
            if(res.data.code==200){
              let list = res.data.data
              if(list){
                this.noLIST = false
                this.list = res.data.data
              }else{
                this.noLIST = true
                this.list = []
              }
            }
          })
        },
        methods: {
          linkTOdetail(id){
            this.$router.push('/order/detail/'+id)
          },
          getDateDiff(timestamp){
            // 补全为13位
            let arrTimestamp = (timestamp + '').split('');
            for (let start = 0; start < 13; start++) {
              if (!arrTimestamp[start]) {
                arrTimestamp[start] = '0';
              }
            }
            timestamp = arrTimestamp.join('') * 1;
            let zero = function (value) {
              if (value < 10) {
                return '0' + value;
              }
              return value;
            };
            return (function () {
              let date = new Date(timestamp);
              return date.getFullYear() + '-' + zero(date.getMonth() + 1) + '-' + zero(date.getDate());
            })();
          },
          searchOrder(type){
            this.page = 1
            this.orderType = type
            this.axios.post('/home/Order/orderList',{
              token:this.$store.state.token,
              page:1,
              type:type
            }).then((res)=>{
              if(res.data.code==200){
                let list = res.data.data
                if(list){
                  this.noLIST = false
                  this.list = res.data.data
                }else{
                  this.noLIST = true
                  this.list = []
                }
              }
            })
          },
          scorll(a){
            let _this = this
            document.onscroll = function(){
              let scrollTop = document.documentElement.scrollTop||document.body.scrollTop;//距离顶部的距离
              let windowHeight = document.documentElement.clientHeight || document.body.clientHeight;//可视区的高度
              let scrollHeight = document.documentElement.scrollHeight||document.body.scrollHeight;//滚动条的总高度
              //滚动条到底部的条件
              if(!_this.emm) return
              if(scrollTop==0) return
              if(scrollHeight-scrollTop-windowHeight<=0){
                _this.page++
                _this.axios.post('/home/Order/orderList',{
                  token:_this.$store.state.token,
                  page:_this.page,
                  type:_this.orderType
                }).then((res)=>{
                  if(res.data.code==200){
                    let list = res.data.data
                    if(list){
                      _this.noLIST = false
                      _this.list = _this.list.concat(res.data.data)
                    }else{
                      return
                    }
                  }
                })
              }
            }
          }
        },
        beforeDestroy: function(){
          this.emm = null
        },
        destroyed(){
          this.emm = null
        }
    }
</script>

<style scoped>
  @import "../../assets/public.css";
  @import "//at.alicdn.com/t/font_814275_a49o0xc0z4m.css";

  .list{
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  .list_li{
    height:.8rem;
    /*padding:0 .29rem;*/
    box-sizing: border-box;
  }
  .list_li>span{
    display: inline-block;
    padding:0 .19rem;
    box-sizing: border-box;
    line-height: .8rem;
    border-bottom: 1px solid transparent;
    /*border-bottom: 1px solid #333;*/
    white-space: nowrap;
  }
  .list_li.active>span{
    color: #28AC4F;
    border-bottom: 1px solid #28AC4F;
  }

  .orderLIST_li{
    margin-top:.2rem;
  }
  .TYPEname{
    height:.73rem;
    line-height: .73rem;
    padding:0 .3rem;
    border-bottom: 1px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .info{
    padding-left: .3rem;
    position: relative;
    display: flex;
    align-items: center;
    padding-top:.2rem;
    padding-bottom:.3rem;
  }
  .TYPElogo{
    width:1.2rem;
    height:1.2rem;
    /*border: 1px solid #ddd;*/
    position: relative;
  }
  .TYPElogo>i{
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
  }
  .TYPElogo>i.zhi{
    width:.68rem;
    height:.82rem;
    background-image: url("img/zhi.png");
  }
  .TYPElogo>i.suliao{
    width:1.04rem;
    height:.7rem;
    background-image: url("img/suliao.png");
  }

  .infoBOX{
    margin-left:.2rem;
    height:1.2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .statusLOGO{
    width:1.08rem;
    height:1.08rem;
    position: absolute;
    right:0;
    top:0;
  }
  .userLOGO{
    width:.67rem;
    height:.7rem;
    background-image: url("img/user.png");
  }
  .companyLOGO{
    width:.73rem;
    height:.73rem;
    background-image: url("img/company.png");
  }
  i.jiedan{
    background-image: url("img/jiedan.png");
  }
  i.shangmen{
    background-image: url("img/shangmen.png");
  }
  i.pay{
     background-image: url("img/pay.png");
  }
  i.pinjia{
    background-image: url("img/pinjia.png");
  }
  i.wancheng{
    background-image: url("img/wancheng.png");
  }
  i.cancel{
    background-image: url("img/cancel.png");
  }

  .order_adress{
    height:.73rem;
    line-height: .73rem;
    margin:0 .3rem;
    border-top: 1px solid #ddd;
  }

  .logo{
    width:2.78rem;
    height:2.27rem;
    background-image: url("img/no.png");
    margin:1.85rem auto .8rem;
    background-size: 100% 100%;
  }
  .noOrder>p{
    text-align: center;
  }
</style>
